<!-- 会员首页 -->
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/uni_modules/uview-plus';
// 数据
const data = reactive({
  amount: '',
  value: null,
  activeIndex: null
})

// 前往充值记录列表页面
const goToRechargeRecord = () => {
  uni.navigateTo({
    url: '/subPackage/my/member/record'
  })
}
// 金额列表
const amountList = [
  [
    { label: '100', value: 100 },
    { label: '200', value: 200 },
    { label: '500', value: 500 }
  ],
  [
    { label: '1000', value: 1000 },
    { label: '2000', value: 2000 },
    { label: '3000', value: 3000 }
  ]
  // { label: '5000', value: 5000 }
]
const input = ref(null)
// 选择金额
const selectAmount = item => {
  if (item == 'custom') {
    data.amount = data.value || ''
    data.activeIndex = 'custom'
    console.log(input)
    nextTick().then(() => {
      console.log(input)
      input.value.focus()
    });
  } else {
    data.value = null
    data.amount = item.value
    data.activeIndex = item.value
  }
}
// 支付
function pay() {
  toast('支付服务未开通，请联系客服')
}
</script>

<template>
  <view class="member-page">
    <view class="card-info-box">
      <!-- 背景 -->
      <image class="bg" style="width: 666rpx; height: 280rpx;" src="/static/images/my_vip_bg2.png" mode="scaleToFill" />
      <!-- 充值记录按钮 -->
      <view class="record-btn" @click="goToRechargeRecord">充值记录</view>
      <!-- 内容 -->
      <view class="cnt">
        <!-- 金额 -->
        <view class="amount-box">
          <text class="unit">￥</text>
          <text class="amount">00.00</text>
        </view>
        <!-- 进度 -->
        <view class="progress-box">
          <text>当前累计充值¥00.00</text>
          <up-line-progress :percentage="0" :showText="false" height="8rpx" inactiveColor="#FAEED1"></up-line-progress>
        </view>
      </view>
    </view>
    <!-- 充值金额选择 | 输入 -->
    <view class="recharge-box">
      <view class="title">充值金额</view>
      <up-row v-for="(row, rindex) in amountList" :key="rindex" customStyle="margin-bottom: 20rpx">
        <up-col :span="4" v-for="item in row" :key="item.amount">
          <view class="item" :class="{ active: data.activeIndex == item.value }" @click="selectAmount(item)">
            {{ item.label + '元' }}
          </view>
        </up-col>
      </up-row>
      <up-row>
        <up-col :span="4">
          <view class="item" :class="{ active: data.activeIndex == 5000 }"
            @click="selectAmount({ label: '5000', value: 5000 })">
            {{ '5000元' }}
          </view>
        </up-col>
        <up-col :span="8">
          <view class="item other-box" :class="{ active: data.activeIndex == 'custom' }"
            @click="selectAmount('custom')">
            <up-input ref="input" v-model="data.value" placeholder="其他面额" type="number" border="none"
              @change="data.amount = $event"></up-input>
          </view>
        </up-col>
      </up-row>
    </view>
    <!-- 按钮 -->
    <view class="btn-box">
      <up-button :disabled="!data.amount" type="primary" size="large" @click="pay">立即充值{{ data.amount ?
        `￥(${data.amount})` : '' }}</up-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.member-page {
  padding: 48rpx 42rpx;

  // 卡信息
  & .card-info-box {
    position: relative;
    width: 666rpx;
    height: 280rpx;
    overflow: hidden;

    // 背景
    & .bg {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }

    // 充值记录按钮
    & .record-btn {
      position: absolute;
      right: 0rpx;
      top: 42rpx;
      z-index: 2;
      padding-left: 10rpx;
      width: 98rpx;
      height: 36rpx;
      line-height: 36rpx;
      text-align: center;
      font-weight: 400;
      font-size: 18rpx;
      color: #FFFFFF;
      border-radius: 20rpx 0 0 20rpx;
      background: linear-gradient(90deg, #472614 0.43%, #8E5837 99.92%);
    }

    // 内容
    & .cnt {
      position: relative;
      z-index: 2;

      // 金额
      & .amount-box {
        margin-top: 104rpx;
        margin-left: 28rpx;

        & .unit {
          font-weight: 500;
          font-size: 40rpx;
          color: #56311C;
        }

        & .amount {
          font-weight: bold;
          font-size: 57rpx;
          background: linear-gradient(31.456819593938487deg, #472614 0%, #FFA76E 100%);
          color: transparent;
          background-clip: text;
        }
      }

      // 充值进度
      & .progress-box {
        margin-left: 28rpx;
        margin-right: 42rpx;
        margin-top: 20rpx;

        & text {
          font-weight: 400;
          font-size: 18rpx;
          color: #724613;
        }

        &::v-deep .u-line-progress {
          margin-top: 12rpx;

          & .u-line-progress__line {
            background: linear-gradient(121deg, #472614 0%, #FFA76E 100%) !important;
            border-radius: 200rpx 200rpx 200rpx 200rpx;
          }
        }
      }
    }
  }

  // 充值金额选择 | 输入
  & .recharge-box {
    margin-top: 48rpx;

    & .title {
      margin-bottom: 16rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #242532;
    }

    & .item {
      width: 210rpx;
      height: 120rpx;
      line-height: 120rpx;
      text-align: center;
      background: #F4F5F6;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #3F404C;

      &.other-box {
        display: flex;
        align-items: center;
        width: 438rpx;
        height: 120rpx;
        background: #F4F5F6;
        border-radius: 8rpx 8rpx 8rpx 8rpx;

        &::v-deep .u-input {
          height: 120rpx;

          & input {
            color: #FFAF36 !important;
            text-align: center !important;
          }
        }
      }

      &.active {
        background: #FFF2DF;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFAF36;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #FFAF36;
      }
    }
  }

  // 按钮
  & .btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    padding: 0 42rpx;
    width: 750rpx;
    height: 172rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border-top: 1rpx solid #E9E9EB;

    &::v-deep .u-button {
      margin: 12rpx 0rpx;
      width: 660rpx;
      height: 88rpx;
      background: #FFA618;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
      border: none;
      border-radius: 112rpx 112rpx 112rpx 112rpx;
    }
  }
}
</style>
